<template>
	<div class="hello" style="width:100%;height:100%;">
		<el-row class="table-grid-content">
		<el-col :span="20" class="grid">
			<el-input v-model="input" placeholder="请输入搜索内容"></el-input>
		</el-col>
		<el-col :span="4" class="grid" :gutter="1">
			<el-button type="primary" icon="el-icon-search">搜索</el-button>
		</el-col>
		</el-row>

		<el-table :data="tables" :stripe="true" :border="true" width="100%" style="text-align:center;">
			<el-table-column align="center" width="250px" label="商品ID" prop="number">
				<template slot-scope="scope">
					{{scope.row._id}}
				</template>	
			</el-table-column>
			<el-table-column align="center" label="商品图片" prop="image">
				<template slot-scope="scope" width="200px">
					<img :src="scope.row.commodityImgBig[0]" style="width:150px;height:150px;margin:20px"/>
				</template>	
			</el-table-column>
			<el-table-column align="center" width="300px" label="商品名称" prop="commodityTitle">
				<template slot-scope="scope">
					{{scope.row.commodityTitle}}
				</template>	
			</el-table-column>
			<el-table-column align="center" label="商品名称" prop="commodityClassify">
				<template slot-scope="scope">
					{{scope.row.commodityClassify}}
				</template>	
			</el-table-column>
			<el-table-column align="center" label="商品价格" prop="minPrice">
				<template slot-scope="scope">
					￥{{scope.row.minPrice}}
				</template>	
			</el-table-column>
			<el-table-column align="center" label="上架状态">
				<template slot-scope="scope" prop="state">
					<el-switch
					v-model="scope.row.commodityPutaway"
					:active-text="PutawayText"
					active-color="#13ce66"
					inactive-color="#ff4949"
					@change="changeSwitch(scope.$index, scope.row)"
					>
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
				<el-button type="primary" @click="modifyData(scope.$index, scope.row)">修改</el-button>
				<el-button type="success" @click="deleteData(scope.$index,tableData)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :visible.sync="centerDialogVisible">
			<el-form :model="editForm">
				<el-form-item label="商品图片">
					<el-upload
						class="avatar-uploader"
						action="https://upload-z1.qiniup.com"
						:data="uploadImg"
						:show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input v-model="editForm.commodityTitle"></el-input>
				</el-form-item>
				<el-form-item label="商品分类">
					<el-input v-model="editForm.commodityClassify"></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="editForm.minPrice"></el-input>
				</el-form-item>
			</el-form>
		<div>
			<el-button @click="closeDialog()">取消</el-button>
			<el-button type="primary" @click="sumbitEditRow()">确定</el-button>
		</div>
		</el-dialog>
		<div class="block">
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="length">
		</el-pagination>
		</div>
	</div>
</template>

<script>
import axios from "axios";
var _index;
export default {
	destroyed(){
		this.$api.$post("/DeleteData",{params:this.DeleteData}).then((res)=>{
			console.log(res)
		})
		this.$api.$post("/updataCommodity",{params:this.UpdataData}).then((res)=>{
			console.log(res)
		})
	},
	mounted(){
		//获取商品列表
		this.getTableData(this.currentPage,this.pagesize)
		//获取token
		this.$api.$get("/uploadImg").then((res)=>{
			console.log(res.data.token)
			this.uploadImg.token = res.data.token
		})
	},
	data() {
		return {
		PutawayText:"已上架",
		imageUrl: '',
		uploadImg:{
			token:''
		},
		length:0,
		DeleteData:[],
		UpdataData:[],
		currentPage:1, //初始页
		pagesize:10,    //    每页的数据
		image:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1312059974,1893880587&fm=111&gp=0.jpg',
		centerDialogVisible:false,
		isAddMembers:false,
		editForm: [],
		input: "",
		value1:true,
		tableData: []
		}
	},
	methods: {
		getTableData(currentPage,pagesize){
			this.$api.$post("/getComment",{params:{currentPage:currentPage,pagesize:pagesize}}).then((res)=>{
				console.log(res)
				this.tableData = res.data.data
				this.length = res.data.length
			})
		},
		//删除
		deleteData(index, row) {
			this.tableData.splice(index, 1);
			console.log("删除")
			this.DeleteData = [...this.DeleteData,row]
		},
		handleSizeChange: function (size) {
			this.pagesize = size;
			console.log(size)
			console.log(this.pagesize)  //每页下拉显示数据
		},
		handleCurrentChange: function(currentPage){
			this.currentPage = currentPage;
			console.log(this.currentPage)  //点击第几页
			this.getTableData(currentPage,this.pagesize)
        },
		//修改
		modifyData(index, row) {
			this.centerDialogVisible = true;
			this.editForm = Object.assign({}, row); //重置对象
			_index = index;
			console.log(index,row)
			console.log("修改")
		},
		//修改后的确定
		sumbitEditRow() {
			var editData = _index;
			console.log("editData的值" + this.editForm);
			this.tableData[editData].commodityTitle = this.editForm.commodityTitle;
			this.tableData[editData].minPrice = Math.abs(this.editForm.minPrice);
			this.tableData[editData].commodityImgBig[0] = this.imageUrl;
			this.tableData[editData].commodityClassify = this.editForm.commodityClassify;
			console.log("数据：" + this.editForm.date);
			console.log("对象数组", this.tableData);
			this.centerDialogVisible = false;
			console.log(this.tableData[editData])
			this.UpdataData = [...this.UpdataData,this.tableData[editData]]
			this.imageUrl = ""
			this.$message('修改成功');
		},
		//修改中的取消
		closeDialog() {
			this.centerDialogVisible = false;
			this.isAddMembers = false;
		},
		//滑动块
		changeSwitch(index,row){
			console.log(index,row)
			if(row.commodityPutaway){
				this.PutawayText="已上架"
			}else{
				this.PutawayText="已下架"
			}
		},
		//上传头像
		handleAvatarSuccess(res, file) {
			this.imageUrl = "http://q6k6s03kn.bkt.clouddn.com/"+file.response.key
		},
		// beforeAvatarUpload(file) {
		// 	const isJPG = file.type === 'image/jpeg/webp';
		// 	const isLt2M = file.size / 1024 / 1024 < 2;

		// 	if (!isJPG) {
		// 	this.$message.error('上传头像图片只能是 JPG 格式!');
		// 	}
		// 	if (!isLt2M) {
		// 	this.$message.error('上传头像图片大小不能超过 2MB!');
		// 	}
		// 	return isJPG && isLt2M;
		// }
	},
	//搜索
	computed: {
		tables() {
		const input = this.input;
		if (input) {
			console.log("input输入的搜索内容：" + this.input);
			return this.tableData.filter(data => {
			console.log("object:" + Object.keys(data));
			console.log(data)
			return Object.keys(data).some(key => {
				return (
				String(data[key])
					.toLowerCase()
					.indexOf(input) > -1
				);
			});
			});
		}
		return this.tableData;
		}
	}
};
</script>
<style lang="scss" scoped>
.hello{
	width: 100%;
}
.table-grid-content {
	border-radius: 4px;
	height: 50 px;
	background: #fff;
	padding: 10px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>




